<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script>
    var o = {
      name: 'jim',
      age: 19,
      gender: '男'
    };


    // 简化后的版本
    function defineReactive(target, key, value, enumerable) {
      // 函数内部就是一个局部作用域, 这个 value 就只在函数内使用的变量 ( 闭包 )
      Object.defineProperty(target, key, {
        configurable: true,
        enumerable: !!enumerable,

        get() {
          console.log(`读取 o 的 ${key} 属性`); // 额外
          return value;
        },
        set(newVal) {
          console.log(`设置 o 的 ${key} 属性为: ${newVal}`); // 额外
          value = newVal;
        }
      })
    }

    // 将对象转换为响应式的
    let keys = Object.keys(o);
    for (let i = 0; i < keys.length; i++) {
      defineReactive(o, keys[i], o[keys[i]], true);
    }
  </script>
</body>

</html>